<template>
  <div class="view-wrapper">
    <div class="head">
      <div class="head_box_one">
        <div class="head_box_one_t">
          <span>FB</span>
          <img src="@/static/fb_icon.png" alt="" />
        </div>
        <div class="head_box_one_b_relative">
          <img
            class="head_box_one_b_img1"
            src="@/static/yuan_icon.png"
            alt=""
          />
          <img class="head_box_one_b_img2" src="@/static/fb_icon2.png" alt="" />
          <div class="head_box_one_b">
            <p class="head_box_one_b_title">累计分发</p>
            <p class="head_box_one_b_num">{{ fbInfo.accumulateAmount }}</p>
            <div class="head_box_one_b_b">
              <div class="head_box_one_b_b_box">
                <div class="cumulative">
                  <span class="cumulative_txt">今日累计分发</span>
                  <span class="cumulative_num">{{
                    fbInfo.todayAccumulateAmount
                  }}</span>
                </div>
                <div class="cumulative" style="margin: 0">
                  <span class="cumulative_txt">昨日累计分发</span>
                  <span class="cumulative_num">{{
                    fbInfo.yesterdayAccumulateAmount
                  }}</span>
                </div>
              </div>
              <div class="line"></div>
              <div class="head_box_one_b_b_box">
                <div class="cumulative">
                  <span class="cumulative_txt">月累计分发</span>
                  <span class="cumulative_num">{{
                    fbInfo.monthAccumulateAmount
                  }}</span>
                </div>
                <div class="cumulative" style="margin: 0">
                  <span class="cumulative_txt">累计销毁</span>
                  <span class="cumulative_num">{{
                    fbInfo.accumulateDestroyAmount
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="head_box_one">
        <div class="head_box_one_t" style="background: #ffb13c">
          <span>蜂蜜分</span>
          <img src="@/static/fmf_icon.png" alt="" />
        </div>
        <div class="head_box_one_b_relative">
          <img
            class="head_box_one_b_img1"
            src="@/static/yuan_icon.png"
            alt=""
          />
          <img
            class="head_box_one_b_img2"
            src="@/static/fmf_icon2.png"
            alt=""
          />
          <div class="head_box_one_b">
            <p class="head_box_one_b_title">累计分发</p>
            <p class="head_box_one_b_num">{{ fmfInfo.accumulateAmount }}</p>
            <div class="head_box_one_b_b">
              <div class="head_box_one_b_b_box">
                <div class="cumulative">
                  <span class="cumulative_txt">今日累计分发</span>
                  <span class="cumulative_num">{{
                    fmfInfo.todayAccumulateAmount
                  }}</span>
                </div>
                <div class="cumulative" style="margin: 0">
                  <span class="cumulative_txt">昨日累计分发</span>
                  <span class="cumulative_num">{{
                    fmfInfo.yesterdayAccumulateAmount
                  }}</span>
                </div>
              </div>
              <div class="line"></div>
              <div class="head_box_one_b_b_box">
                <div class="cumulative">
                  <span class="cumulative_txt">月累计分发</span>
                  <span class="cumulative_num">{{
                    fmfInfo.monthAccumulateAmount
                  }}</span>
                </div>
                <div class="cumulative" style="margin: 0">
                  <span class="cumulative_txt">累计兑换</span>
                  <span class="cumulative_num">{{
                    fmfInfo.accumulateDestroyAmount
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="head_box_two">
        <div class="head_box_two_h">
          <span>分红设置</span>
          <div class="modify" @click="showOne = true" v-if="!showOne">修改</div>
          <div class="cancel" @click="closeOne" v-if="showOne">取消</div>
          <div class="modify" @click="sumitOne" v-if="showOne">保存</div>
        </div>
        <div class="formula">
          分红公式：（当前用户拥有FB/平台累计发出的FB*（额定分红金额*a%））
        </div>
        <div class="flex">
          <div class="formula_box">
            <p>额定分红金额=</p>
            <el-input
              placeholder="请输入"
              v-model="platformFB.dividendMoney"
              v-if="showOne"
            >
              <template slot="append">元</template>
            </el-input>
            <div class="formula_input" v-if="!showOne">
              <span>{{ platformFB.dividendMoney }}</span>
              <span>元</span>
            </div>
          </div>
          <div class="formula_box">
            <p>a=</p>
            <el-input
              placeholder="请输入"
              v-model="platformFB.dividendRatio"
              v-if="showOne"
            >
              <template slot="append" style="background-color: #fff"
                >%</template
              >
            </el-input>
            <div class="formula_input" v-if="!showOne">
              <span>{{ platformFB.dividendRatio }}</span>
              <span>%</span>
            </div>
          </div>
        </div>
        <div class="head_box_two_h" style="margin: 20px 0 10px">
          <span>分红设置</span>
          <div class="modify" @click="showTwo = true" v-if="!showTwo">修改</div>
          <div class="cancel" @click="closeTwo" v-if="showTwo">取消</div>
          <div class="modify" @click="sumitTwo" v-if="showTwo">保存</div>
        </div>
        <div class="formula_box">
          <p>1蜂蜜分=</p>
          <el-input
            placeholder="请输入"
            v-model="platformFB.honeyPointsRatio"
            v-if="showTwo"
          >
            <template slot="append" style="background-color: #fff">FB</template>
          </el-input>
          <div class="formula_input" v-if="!showTwo">
            <span>{{ platformFB.honeyPointsRatio }}</span>
            <span>FB</span>
          </div>
        </div>
      </div>
    </div>
    <div class="listBox">
      <div class="list_search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户昵称：">
            <el-input
              placeholder="请输入用户昵称"
              v-model="formInline.nickName"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="用户手机号码：">
            <el-input
              placeholder="请输入手机号码"
              v-model="formInline.phoneNumber"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="list_num">
        <span>共 {{tableData.length}} 条数据</span>
        <div class="label_box">
          <span class="label">排序：</span>
          <el-select
            v-model="value"
            placeholder="请选择"
            style="margin-right: 20px;width:260px"
            @change="changeValue"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <export-excel-button
            title="用户平台资产信息表"
            action="/platform/asset/v1/customer/wallet/export"
            :params="ExportParams"
          />
        </div>
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <!-- <template v-slot:operate="{ scope }">
          
        </template> -->
        <template v-slot:operate="{ scope }">
          <img
            class="avant"
            :src="scope.row.avatar"
            alt=""
            @click="geReport(scope)"
          />
        </template>
      </ex-table>
    </div>
  </div>
</template>
<script>
// components
import {
  fbInfo,
  integralInfo,
  platformFB,
  platformFBDividend,
  platformFBExchange,
  walletInfo
} from "@/api/passandPoint";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  //   name: "",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      formInline: {
        nickName: "",//客户昵称
        phoneNumber:"",//手机号码
        sortType:"1",//排序类型 1 按照fb数量降序 2 按照蜂蜜分降序 3 按照注册时间降序 4 按照最后登录时间降序
      },
      options: [
        {
          value: "1",
          label: "按照FB由大到小排序",
        },
        {
          value: "2",
          label: "按照蜂蜜分由大到小排序",
        },
        {
          value: "3",
          label: "按照注册时间由近至远排序",
        },
        {
          value: "4",
          label: "按照最后登录时间由近至远排序",
        },
      ],
      value: "1",
      tableData: [],
      tableColumn: [
        {
          label: "头像",
          slot: true,
          slotName: "operate",
          width: "100",
        },
        { prop: "nickName", label: "昵称" },
        { prop: "phoneNumber", label: "手机号" },
        { prop: "fb", label: "FB/冻结的FB/总计" },
        { prop: "honeyPoints", label: "蜂蜜分" },
        { prop: "money", label: "可提现金额（￥）" },
        { prop: "createTime", label: "注册时间" },
        { prop: "updateTime", label: "最后登录时间" },
      ],
      fbInfo: {},
      fmfInfo: {},
      platformFB: {
        dividendMoney: "",
        dividendRatio: "",
        honeyPointsRatio: "",
      },
      showOne: false,
      showTwo: false,
    };
  },
  created() {
    this.getFbInfo();
    this.getFmfInfo();
    this.getPlatformFB();
    this.getList()
  },
  computed: {
    ExportParams() {
      const { id: ticketId } = this;
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      return params;
    },
  },
  methods: {
    getFbInfo() {
      //查询FB使用信息
      const params = {};
      this.loading = true;
      fbInfo(params)
        .then((res) => {
          this.fbInfo = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getFmfInfo() {
      //查询fmf使用信息
      const params = {};
      integralInfo(params)
        .then((res) => {
          this.fmfInfo = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getPlatformFB() {
      //查询FB配置信息
      const params = {};
      platformFB(params)
        .then((res) => {
          this.platformFB = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    closeOne(){
      this.getPlatformFB()
      this.showOne = false  
    },
    closeTwo(){
      this.getPlatformFB()
      this.showTwo = false  
    },
    sumitOne() {
      //platformFBDividend
      const params = {
        dividendMoney: this.platformFB.dividendMoney,
        dividendRatio: this.platformFB.dividendRatio,
      };
      platformFBDividend(params)
        .then((res) => {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          setTimeout(() => {
            this.showOne = false;
            this.getPlatformFB();
          }, 500);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    sumitTwo() {
      //platformFBExchange
      const params = {
        honeyPointsRatio: this.platformFB.honeyPointsRatio,
      };
      platformFBExchange(params)
        .then((res) => {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          setTimeout(() => {
            this.showTwo = false;
            this.getPlatformFB();
          }, 500);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    changeValue(e){
      console.log(e)
      this.formInline.sortType = e
      this.onSubmit()
    },
    onSubmit() {
      //查询
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      this.formInline = {};
      this.formInline.sortType = 1;
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    getList() {
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      this.loading = true;
      walletInfo(params)
        .then((res) => {
          const { total, records } = res.result;
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  box-shadow: 0;
  background-color: #f3f5f7;
}
.head_box_one {
  width: 30%;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 0px 2px #b8bdc1;
  margin-right: 2%;
}
.head_box_one_t {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff705d;
  border-radius: 8px 8px 0px 0px;
  font-size: 26px;
  color: #fff;
  padding: 6px 0;
  box-shadow: 0px 0px 2px #b8bdc1;
}
.head_box_one_t img {
  width: 20px;
  height: 20px;
  margin-left: 8px;
}
.head_box_one_b_relative {
  position: relative;
  height: 289px;
}
.head_box_one_b {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.head_box_one_b_img1 {
  width: 121px;
  height: 181px;
  position: absolute;
  top: -42px;
  left: 0;
}
.head_box_one_b_img2 {
  width: 160px;
  height: 160px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.head_box_one_b_title {
  font-size: 20px;
  color: #666666;
  margin: 42px 0 7px;
}
.head_box_one_b_num {
  font-size: 56px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30px;
}
.head_box_one_b_b {
  display: flex;
  align-items: center;
  width: 100%;
}
.head_box_one_b_b_box {
  width: 50%;
}
.cumulative {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
}
.cumulative_txt {
  font-size: 14px;
  color: #666666;
  margin-right: 17px;
  width: 86px;
}
.cumulative_num {
  font-size: 16px;
  color: #333333;
}
.line {
  width: 1px;
  height: 43px;
  background-color: #b2b2b2;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 30px;
}
.list_search {
  display: flex;
  align-items: center;
  padding-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
.head_box_two {
  flex: 1;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 0px 2px #b8bdc1;
  height: 330px;
  padding: 25px 40px;
  box-sizing: border-box;
}
.head_box_two_h {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #333333;
  font-weight: bold;
}
.modify {
  width: 48px;
  height: 24px;
  border-radius: 2px;
  background: #1890ff;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 24px;
  font-weight: 100;
  margin-left: 30px;
  cursor: pointer;
}
.cancel {
  width: 48px;
  height: 24px;
  border-radius: 2px;
  border: 0.5px solid #969696;
  color: #666;
  font-size: 14px;
  text-align: center;
  line-height: 22px;
  font-weight: 100;
  margin-left: 30px;
  cursor: pointer;
}
.formula {
  font-size: 13px;
  color: #666666;
  margin: 20px 0;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.formula_box {
  width: 40%;
}
.formula_box p {
  font-size: 14px;
  color: #333333;
  margin-bottom: 9px;
}
.formula ::v-deep.el-input-group__append {
  background: #ff9300 !important;
}
.formula_input {
  border: 0.5px solid #b3bec9;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 17px;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 13px;
}
.list_num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: #666666;
  margin-bottom: 20px;
}
.label_box {
  display: flex;
  align-items: center;
}
.label {
  font-size: 15px;
  color: #333333;
}
.avant {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
